[FW] [AI] Flex用グラフィックアセットの作成 ～swf編

[使用アプリケーション] Fireworks, Illustrator

 

前回の記事で「Fireworksで作成したグラフィックアセットを画像として書きだす方法」について触れました。今回は書き出されたpng画像をひとつのswfファイルにまとめてみます。数多くのグラフィックアセットがひとつのファイルとして扱えるので素材まわりがすっきりとします。
Flex側からグラフィックアセットを適用する方法はこちらを参照してください。

書き出された複数のpng画像をひとつのswfファイルにまとめる

Flexで読み込み可能なswfファイルはいくつかの方法で作成することができます。

1. Illustratorだけを使用して作成する
2. FireworksまたはPhotoshopで作成し書き出されたpng/Jpg等の画像をIllustratorに埋め込み、swfとして書きだす
3. Flashだけを使用して作成する
4. FireworksまたはPhotoshopで作成し書き出されたpng/Jpg等の画像をFlashに埋め込む、またはコピー後swfとして書きだす

今回は上記の「2」の方法についての説明です。

Fireworksはベクターデータも扱っていますのでパスやグラデーションのデータをそのままIllustratorに複製できればよいのですが、現状ではパス（とベタ面カラー）のコピーしかできません。（※Fireworksの「編集」メニューから「ベクトルとしてコピー」を選択するとIllustrator上にパスが複製可能です。）
Fireworksで作ったエフェクトのついた画像素材の見た目の再現性を重視するのであれば、ビットマップ画像として書きだした（もしくは通常の方法でコピーした）イメージをIllustratorに埋め込むのが適しています。

1.素材の準備

基本的には前回のサンプル画像とほぼ同じものを使用しますがやはり画像は少しでも軽いほうが良いので、少し加工して矩形などは伸び縮み可能な形式（スライス）にしてみたいと思います。（Flex状で配置しなおす必要はありますが。）

●Fireworksのサンプルファイルはこちら。

素材の容量を軽くするために、例えばメインメニューのバック地は
・bg_buttons
・separator
に分けます。
「bg_buttons」は角丸とグラデーションを損なわない程度に縮小します。「separator」は短くします。
（※separatorは長さ、位置、カラーを指定してFlex上で直接描いたほうがよいかもしれませんが。）

同様にスクローラーまわりの部品やインプットフォーム等も画像を縮小します。
必要なパーツが揃ったら前回の方法で必要な素材をpng画像として書き出します。

2.Illustratorに画像を埋め込む

Illustratorを開きます。新規ドキュメント作成ダイアログボックスで書類の設定をします。（サイズはあとで調節できますので最初は適度な大きさに。）

・単位を「ピクセル」にする
・プレビューモードを「ピクセル」にする
※「新規オブジェクトをピクセルグリッドに整合」チェックボックスは時と場合によってONにしたりOFFにしたりします。今回はとりあえずここではOFFに。

さきほど書きだしたpng画像をIllustrator上に配置します。方法はいくつかあると思いますが、ここでは書き出した画像をIllustratorのステージ上に直接ドラッグ＆ドロップして置きます。

配置した画像全てを並べて選択状態にします。

画像を選択した状態で、Illustratorのコントロールパネルにある「埋め込み」ボタンをクリックします。こうすることでAIファイルの中にpng画像が埋め込ます。

3.画像をシンボル化する

埋め込んだ画像ひとつひとつをIllustrator上で「シンボル」にします。Flex側からはこのシンボル名を指定して画像にアクセスしますので、シンボル名が一覧でわかるような画面があれば便利です。
シンボル化する前に、つけたいシンボル名を画像脇にでも記入しておきます。

「i_001_selected」をシンボルにします。画像を選択した状態で「F8」ボタンを押す、または「シンボル」パレット下にある「新規シンボル」ボタンを押すと「新規シンボル作成ダイアログボックスが表示されます。
ここで以下のように設定をします。
・「名前」欄にシンボル名を記入
・「種類」は「ムービークリップ」を選択
・「基準点」を左上に設定
・「ピクセルグリッドに整合」チェックボックスをON

上記の設定ができたら「OK」ボタンを押します。これで「i_001_selected」というシンボルができました。同様に他の画像もシンボル化します。

【TIPS】サイズが整数値になっているかチェック！

残念なことにFireworksから整数値のサイズで画像を書きだしても何故かIllustratorに貼り付けると小数点つきのサイズになってしまいます。

このまま使用すると画像の周りに意図しないアンチエイリアスがかかってUIがぼやけた印象になってしまう場合があるので、少々面倒ですがIllustrator上でサイズを整数値に戻すようにします。
例えば「i_001_selected」をダブルクリックしてシンボルの編集モードに入ります。そこで画像を選択すると
・(x,y)=(0,0)
・width=112.026 px, height=112.026 px
となっていますので小数点を切り捨てて以下のように修正しておきます。
・width=112 px, height=112 px

【TIPS】透過アイコンのまわりに透明の矩形をつける

メインメニューにはデフォルトのステートとセレクテッドのステートを用意しています。ステートが変わったときにズレがなく画像が切り替わるようにするために、デフォルトのステートのアイコンはセレクテッドのステートのアイコンとぴったり同じサイズにしておく必要があります。
今のままだとデフォルトのステートのアイコンは周りが透過になっているのでセレクテッドのアイコンとサイズが違います。ですのでデフォルトのアイコンのまわりに矩形を追加します。（透明な矩形または同サイズの矩形レイヤーを準備しそのレイヤーを不可視にする方法でも大丈夫です。）

【TIPS】サイズ可変な9スライスを設定する

メインメニューのバック地やスクローラーのつまみ等は「9スライス」を設定してFlex側で伸縮可能なシンボルにします。「9スライス」は
・シンボル作成時のダイアログボックス
・シンボル化の後、「シンボル」パネル下部のボタンクリックで表示する「シンボルオプション」ダイアログボックス
からON／OFFの設定をすることができます。

グラデーションの素材などは色味がおかしくならない場所で9スライスを設定します。

 

4.swfファイルを書きだす

ひと通りの設定を終えたら、「ファイル」メニュー→「スクリプト」→「Flexスキン」→「Flexスキンの書き出し」を選択し適切なファイル名をつけてswfファイルを書き出します。

●書きだされたswfはこちら
●アセット作成用のサンプルAIファイルはこちら

これで画像をひとつのswfにまとめることができました。このswfファイルをFlex側から読むにはこの記事を参照してください。

次回はFireworksで作った画像をFlash経由でswcに書きだす方法についてです。